<script lang="ts">
	import {
		tableContextKey,
		columnContextKey,
		type TableContext,
		type ColumnContext,
		type ColumnConfig,
		type SummaryType
	} from './context/table-context';
	import { getContext, setContext, onMount } from 'svelte';

	/** 列组件属性类型（包含插槽相关定义） */
	interface TableColumnProps<T = Record<string, any>> {
		key?: keyof T | string; // 分组表头可以没有 key，或者随意指定;
		keyType?: 'string' | 'number' | 'mixed';
		title?: string;
		align?: 'left' | 'center' | 'right';
		width?: number;
		minWidth?: number;
		class?: string;
		// 新增：排序相关属性
		sortable?: boolean;
		// 新增：筛选相关属性
		filterable?: boolean;
		filters?: {
			value: string;
			label: string;
		}[];
		dataFilters?: boolean;
		// 🔥 新增：合计属性
        summary?: boolean | SummaryType; // 支持类型字符串
        summaryText?: string;
        summaryMethod?: (data: T[]) => string | number;
        summaryColSpan?: number; // 合并列数
        summaryFormatter?: (value: number | string) => string; // 格式化
		onFilter?: (value: any, record: T) => boolean;
		children?: any; // 允许嵌套 slot		
		//插槽		
		header?: () => any; // 表头插槽（无参数）
		cell?: (scope: { row: T; index: number; column: TableColumnProps<T> }) => any; // 单元格插槽（带参数）
		filterDropdown?: (props: {
			column: TableColumnProps<T>;
			value: any;
			onConfirm: (value: any) => void;
			onReset: () => void;
			onClose: () => void;
		}) => any;
	}

	// 🔥 用 $props() 获取所有属性（替代 export let）
	const {
		key = `col_${Math.random().toString(36).slice(2, 11)}`, // 默认生成 ID,
		keyType,
		title = '',
		align,
		width = 0,
		minWidth = 0,
		class: columnClass = '',
		// 新增：排序和筛选属性
		sortable = false,
		filterable = false,
		filters,
		dataFilters = false,		
		onFilter,
		summary = false,
        summaryText,
        summaryMethod,
        // 🔥 新增解构
        summaryColSpan = 1, 
        summaryFormatter,
		children, // 接收 children 插槽		
		header, // 表头插槽
		cell, // 单元格插槽（避免与关键字冲突，重命名为 cell）
		filterDropdown // 筛选下拉框插槽
	}: TableColumnProps = $props();

	// 内部状态：存储子列
	const childColumns = $state<ColumnConfig[]>([]);

	/** 暴露列配置给 Table 主组件 */
	const columnConfig = $derived({
		key,
		keyType,
		title,
		align: align? align : (childColumns.length > 0 ? 'center' : 'left'),
		width,
		minWidth,
		class: columnClass,
		// 传递排序和筛选配置
		sortable: childColumns.length > 0 ? false : sortable, // 🔥 如果有子列，强制禁用排序
		filterable: childColumns.length > 0 ? false : filterable, // 🔥 如果有子列，强制禁用筛选
		filters,
		dataFilters,
		onFilter,
		summary,
        summaryText,
        summaryMethod,
        // 🔥 传入 config
        summaryColSpan,
        summaryFormatter,
		children: childColumns, // 关联子列
		slots: {
			header, // 传递表头插槽
			cell, // 传递单元格插槽
			filterDropdown // 传递筛选下拉框插槽
		}
	});
	// 1. 尝试获取父列 Context
	const parentColumnContext = getContext<ColumnContext>(columnContextKey);
	// 2. 获取表格 Context
	const tableContext = getContext<TableContext>(tableContextKey);
	if (!tableContext) {
		throw new Error('TableColumn 必须在 Table 组件内部使用');
	}
	// 🔥 向下提供 Context，让子列注册到自己这里
	setContext(columnContextKey, {
		addChild: (childConfig: ColumnConfig) => {
			if (!childColumns.some((col) => col.key === childConfig.key)) {
				childColumns.push(childConfig);
			}
		},
		removeChild: (childKey: string) => {
			const idx = childColumns.findIndex((col) => col.key === childKey);
			if (idx !== -1) childColumns.splice(idx, 1);
		}
	});
	onMount(() => {
		if (parentColumnContext) {
			// 如果有父列，注册到父列
			// 注意：我们需要传递一个 getter 或者响应式对象，但在简单实现中，
			// 我们依赖 $derived columnConfig 的引用更新，或者重新注册。
			// Svelte 5 的 state 引用传递通常能保持同步。
			parentColumnContext.addChild(columnConfig);
			return () => parentColumnContext.removeChild(key as string);
		} else {
			// 如果是第一层，注册到 Table
			tableContext.addColumn(columnConfig);
			return () => tableContext.removeColumn(key as string);
		}
	});
</script>

<!-- 渲染子组件（嵌套的 TableColumn） -->
{@render children?.()}
